<template>
    <div class="form-wrapper">
        <h1>故障提报表单</h1>
        <el-form>
            <div>
                <el-row><el-divider content-position="left">基础信息</el-divider></el-row>
                <el-row :gutter="300">
                    <el-col :span="8">
                        <el-form-item label="故障时间">
                            <template #default>
                                <el-date-picker
                                    v-model="value1"
                                    type="datetime"
                                    placeholder="选择日期和时间"
                                />
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="报告人">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="地点">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="300">
                    <el-col :span="8">
                        <el-form-item label="专业">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备类型">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="故障级别">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-row><el-divider content-position="left">故障现象</el-divider></el-row>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="故障时间">
                            <el-input type="textarea" :rows="5"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-row><el-divider content-position="left">事件经过</el-divider></el-row>
                <el-row>
                    <div style="padding:10px;width:calc(100% - 20px)">
                        <el-table :data="tableData" border>
                            <el-table-column prop="date" label="日期" width="246">
                                <template #default>
                                    <el-date-picker
                                        v-model="value1"
                                        type="datetime"
                                        placeholder="选择日期和时间"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column prop="describe" label="事件经过">
                                <template #default>
                                        <el-input
                                            :rows="1"
                                            type="textarea"
                                            v-model="value2"
                                            placeholder="请输入事情经过"
                                        />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-row>
            </div>
            <div>
                <el-row><el-divider content-position="left">事件影响</el-divider></el-row>
                <el-row>
                    <div style="padding:10px;width: calc(100% - 20px)">
                        <el-table :data="tableData2" border :show-header="false">
                            <el-table-column prop="contentname" label="类目" width="246"></el-table-column>
                            <el-table-column prop="content" label="内容">
                                <template #default>
                                    <el-input
                                        :rows="1"
                                        type="textarea"
                                        v-model="value2"
                                        placeholder="请输入相关内容"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-row>
            </div>
            <div>
                <el-row><el-divider content-position="left">故障分析</el-divider></el-row>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="故障分析">
                            <el-input type="textarea" :rows="5"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-row><el-divider content-position="left">整改措施</el-divider></el-row>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="整改措施">
                            <el-input type="textarea" :rows="5"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-row><el-divider content-position="left">提交对象</el-divider></el-row>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="审批人">
                            <el-tree-select
                                v-model="value"
                                :data="data"
                                :render-after-expand="false"
                                show-checkbox
                            />
                            <el-input type="textarea" :rows="5"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <footer>
            <el-button >重置</el-button>
            <el-button type="primary">提交</el-button>
        </footer>
    </div>
</template>

<script lang="ts" setup>
import {Ref, ref} from 'vue'
const value1 = ref('')
const value2 = ref('')
const tableData = ref([
    {
        date: '2016-05-03',
        describe: 'Tom',
    },
])
const tableData2 = ref([
    {
        contentname:'运营指标',
        content:'',
    },{
        contentname:'乘客服务',
        content:'',
    },{
        contentname:'其他',
        content:'',
    }
])
const value = ref()

const data = [
    {
        value: '1',
        label: 'Level one 1',
        children: [
            {
                value: '1-1',
                label: 'Level two 1-1',
                children: [
                    {
                        value: '1-1-1',
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
    {
        value: '2',
        label: 'Level one 2',
        children: [
            {
                value: '2-1',
                label: 'Level two 2-1',
                children: [
                    {
                        value: '2-1-1',
                        label: 'Level three 2-1-1',
                    },
                ],
            },
            {
                value: '2-2',
                label: 'Level two 2-2',
                children: [
                    {
                        value: '2-2-1',
                        label: 'Level three 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        value: '3',
        label: 'Level one 3',
        children: [
            {
                value: '3-1',
                label: 'Level two 3-1',
                children: [
                    {
                        value: '3-1-1',
                        label: 'Level three 3-1-1',
                    },
                ],
            },
            {
                value: '3-2',
                label: 'Level two 3-2',
                children: [
                    {
                        value: '3-2-1',
                        label: 'Level three 3-2-1',
                    },
                ],
            },
        ],
    },
]
</script>

<style scoped lang="scss">
.form-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;

    h1 {
        width: auto;
        height: 60px;
        background: #ffffff;
        line-height: 60px;
        text-align: left;
        padding-left: 20px;
        font-weight: 700;
        font-size: 20px;
    }

    .el-form {
        margin: 10px 10px 60px 10px;
        width: calc(100% - 20px);
        div{
            background: #ffffff;
            margin-bottom: 10px;
            .el-row {
                width: 100%;
                margin: 0 !important; //否则会错位
                .el-form-item{
                    height: 50%;
                }
            }
        }
    }
    .el-input{
        margin-bottom: 0 !important;
    }
    .el-textarea{
        margin-bottom: 0 !important;
    }
    footer{
        text-align: end;
        height: 30px;
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100%;
        background: #ffffff;
        padding: 10px;
        z-index: 1;
    }
}
</style>
